﻿import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Controls.impl 2.14
import QtGraphicalEffects 1.14

Item {

    id: root

    property string title: ""
    property int titleWidth: title === "" ? 0: 80*dp
    property int editWidth: 180*dp

    property int popupHeight: 170*dp



    property string date: {
        if(showYear && showMonth && showDay)    return "2024-10-25"
        if(showYear && showMonth)               return "2025-05"
        if(showMonth && showDay)                return "10-25"
    }

    property bool showYear: true
    property bool showMonth: true
    property bool showDay: true
    property int showDateNum: Math.max(1, (showYear?1:0) + (showMonth?1:0) + (showDay?1:0))      // 计算要显示的有几列

    property var modelYear: []
    property var modelMonth: []
    property var modelDay: []

    Component.onCompleted: {
        for(let y = 2024; y <= 2099; y ++){
            modelYear.push(y)
        }for(let m = 1; m <= 12; m ++){
            modelMonth.push(m)
        }for(let d = 1; d <= 31; d ++){
            modelDay.push(d)
        }
        modelYearChanged()
        modelMonthChanged()
        modelDayChanged()


        setText(date)
        syncScroll2Date()
    }


    height: 40*dp
    width: titleWidth + editWidth


    function getText(){
        return date
    }
    function setText(text){
        date = text
        syncDate2Scroll()
    }


    property bool dateMutex: true
    function syncDate2Scroll(){         // 调用将date同步至滚动列表
        dateMutex = true

        // 第一位 年/月/日
        if(date.split("-").length > 0){
            let num1 = Number(date.split("-")[0])
            if(showYear)       { list_year.setValue(num1);  console.log("setYear", num1)}
            else if(showMonth) { list_month.setValue(num1); console.log("setMonth", num1) }
            else if(showDay)   { list_day.setValue(num1);   console.log("setDay", num1) }
        }
        // 第二位 月/日
        if(date.split("-").length > 1){
            let num2 = Number(date.split("-")[1])
            if(showYear && showMonth)     {  list_month.setValue(num2); console.log("setMonth", num2)  }
            else if(showMonth && showDay) {  list_day.setValue(num2); console.log("setDay", num2)  }
        }
        // 第三位 日
        if(date.split("-").length > 2){
            list_day.setValue(Number(date.split("-")[2]))
        }
        dateMutex = false
    }

    function syncScroll2Date(){         // 用户修改滚动列表时，刷新日期
        date = ""
        if(showYear){
            date += list_year.text
        }if(showMonth){
            if(date !== ""){
                date += "-"
            }
            date += list_month.text
        }if(showDay){
            if(date !== ""){
                date += "-"
            }
            date += list_day.text
        }
    }

    Item{
        height: parent.height
        Text{
            text: title
            font.pixelSize: config.fontsize
            x: 0
            anchors.verticalCenter: parent.verticalCenter
        }

    }

    ComboBox{
        id: control
        height: parent.height
        width: editWidth
        x: titleWidth

        contentItem: Text{
            text: date
            font.pixelSize: config.fontsize
            verticalAlignment: Text.AlignVCenter
            leftPadding: 10*dp
        }

        background: Rectangle{
            anchors.fill: parent
            border.color: (this.isHovered || control.popup.visible) ? config.themeColor : "#CCCCCC"
            radius: 3*dp
            property bool isHovered: false
            MouseArea{      // Hover样式
                anchors.fill: parent
                propagateComposedEvents: true
                hoverEnabled: config.hoverEnabled
                cursorShape: Qt.PointingHandCursor
                onEntered: {
                    parent.isHovered = true && config.hoverEnabled
                }onExited: {
                    parent.isHovered = false
                }onPressed:{
                    mouse.accepted = false
                }onReleased:{
                    mouse.accepted = false
                }
            }
            // 阴影
            layer.enabled: control.popup.visible && config.device!==2
            layer.effect: DropShadow {
                radius: 12*dp
                samples: 43
                transparentBorder: true
                color: "#4D1677FA"
            }
            Image {
                x: parent.width-35*dp; y: 5*dp
                height: root.height-10*dp; width: root.height-10*dp
                source: "qrc:/picture/calendar.png"
            }
        }
        indicator: Item{

        }



        popup: Popup{
            id: popup
            width: control.width
            height: popupHeight
            y: control.height + 2*dp
            contentItem: Row{
                height: popupHeight;  width: control.width
                clip: true
                CustomComboCalendarScrollDateListView{
                    id: list_year
                    visible: showYear
                    height: parent.height; width: parent.width * 1/showDateNum
                    model: modelYear
                    onTextChanged: {
                        if(dateMutex)  return
                        syncScroll2Date()
                    }
                }
                CustomComboCalendarScrollDateListView{
                    id:list_month
                    visible: showMonth
                    height: parent.height; width: parent.width * 1/showDateNum
                    model: modelMonth
                    onTextChanged: {
                        if(dateMutex)  return
                        syncScroll2Date()
                    }
                }
                CustomComboCalendarScrollDateListView{
                    id: list_day
                    visible: showDay
                    height: parent.height; width: parent.width * 1/showDateNum
                    model: modelDay
                    onTextChanged: {
                        if(dateMutex)  return
                        syncScroll2Date()
                    }
                }
            }

            // popup的背景
            background: Rectangle {
                clip: true
                radius: 3*dp
                border.color: "#CCCCCC"
                layer.enabled: true  // 设置layer为enable
                // 阴影
                layer.effect: DropShadow {
                    radius: 21*dp
                    samples: 43
                    transparentBorder: true
                    color: "#4D002062"
                }
            }
            // 过渡效果
            enter: Transition {
                NumberAnimation {
                    property: "height"
                    from: 0
                    to: popupHeight
                    duration: 200
                    easing.type: Easing.InOutQuad
                }
            }
            exit: Transition {
                NumberAnimation {
                    property: "height"
                    from: popupHeight
                    to: 0
                    duration: 200
                    easing.type: Easing.InOutQuad
                }
            }
        }
    }




}
